<template>
  <Layout>
    <Header class="header">
      <slot></slot>
    </Header>
    <Content class="content" id="table-paging-content">
      <Table
        ref="table_paging"
        :data="tableData.list"
        :columns="tableConfig.columns"
        :stripe="tableConfig.stripe"
        :border="tableConfig.border"
        :show-header="tableConfig.showHeader"
        :width="tableConfig.width"
        :height="tableHeight"
        :loading="tableConfig.loading"
        :disabled-hover="tableConfig.disabledHover"
        :highlight-row="tableConfig.highlightRow"
        :row-class-name="tableConfig.rowClassName"
        :size="tableConfig.size"
        :no-data-text="tableConfig.noDataText"
        :no-filtered-data-text="tableConfig.noFilteredDataText"
        :draggable="tableConfig.draggable"
        :tooltip-theme="tableConfig.tooltipTheme"
        :row-key="tableConfig.rowKey"
        @on-select="handleSelect"
        @on-select-all="handleSelectAll"
        @on-selection-change="handleSelectionChange"
      >
        <template v-for="(value,key) in $scopedSlots" v-slot:[key]="{row,column,index}">
          <slot :name="key" :row="row" :column="column" :index="index"></slot>
        </template>
      </Table>
    </Content>
    <Footer class="footer">
      <paging :paging-params="tableData" :config="pagingConfig" @on-change="handlePagingChange"></paging>
    </Footer>
  </Layout>
</template>
<script>
import Paging from '../paging'
export default {
  components: {
    Paging
  },
  props: {
    // 表格数据
    tableData: {
      type: Object,
      default: function () {
        return {
          list: [], // 数据列表
          pageNum: 1, // 当前页数
          pageSize: 10, // 当前页面条数
          pages: 1, // 总页数
          total: 0, // 总条数
          firstPage: 1, // 第一页
          prePage: 1, // 上一页
          nextPage: 1, // 下一页
          lastPage: 1, // 最后一页
          ISFirstPage: false, // 是否是第一页
          ISLastPage: false, // 是否是最后一页
          hasPreviousPage: false, // 是否有上一页
          hasNextPage: false, // 是否有下一页
          navigatePages: 7, // 导航页数
          navigatepageNums: [1] // 导航页列表
        }
      }
    },
    // 表格配置https://www.iviewui.com/components/table
    tableConfig: {
      type: Object,
      default: function () {
        return {}
      }
    },
    // 分页配置
    pagingConfig: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      // 表格高度
      tableHeight: undefined
    }
  },
  methods: {
    // 页码和每页显示大小改变处理的方法
    handlePagingChange(page, pageSize) {
      this.$emit('on-paging-change', page, pageSize)
    },
    // 改变表格高度
    changeTableHeight() {
      let content = document.getElementById('table-paging-content')
      let _this = this
      setTimeout(function () {
        _this.tableHeight = content.offsetHeight
      })
    },
    // 选中某一项触发，返回值为 selection 和 row，分别为已选项和刚选择的项。
    handleSelect(selection, row) {
      this.$emit('on-select', selection, row)
    },
    // 点击全选时触发，返回值为 selection，已选项。
    handleSelectAll(selection) {
      this.$emit('on-select-all', selection)
    },
    // 只要选中项发生变化时就会触发，返回值为 selection，已选项。
    handleSelectionChange(selection) {
      this.$emit('on-selection-change', selection)
    }
  },
  mounted() {
    this.changeTableHeight()
    window.addEventListener('resize', this.changeTableHeight)
    // 传递table的ref到父组件
    this.$parent.$refs.table_paging = this.$refs.table_paging
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.changeTableHeight)
  }
}
</script>
<style lang="less" scoped>
.header {
  background: none;
  padding: 0;
  height: auto;
  line-height: normal;
}
.content {
  overflow-y: auto;
}
.footer {
  padding: 10px;
}
</style>
